
<template>
<!--  导航栏-->
  <el-row>
    <el-col :span="24">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>质量管理</el-breadcrumb-item>
        <el-breadcrumb-item>过程检验</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
  </el-row>
<!--  搜索栏-->
  <el-row style="margin-top: 20px">
    <el-col :span="24">
      <el-form :inline="true" :model="processQuery" >
        <el-form-item label="检验单编号">
          <el-input v-model="processQuery.processId" placeholder="请输入检验单编号"></el-input>
        </el-form-item>
        <el-form-item label="检验类型">
          <el-select v-model="processQuery.processType" placeholder="请选择检测类型" style="width: 130px">
            <el-option label="全部" :value="0"></el-option>
            <el-option label="首检" :value="1"></el-option>
            <el-option label="末检" :value="2"></el-option>
            <el-option label="自检" :value="3"></el-option>
            <el-option label="巡检" :value="4"></el-option>
            <el-option label="点检" :value="5"></el-option>
            <el-option label="终检" :value="6"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工单编号">
          <el-input v-model="processQuery.processTicketsId" placeholder="请输入工单编号"></el-input>
        </el-form-item>
        <el-form-item label="产品物料编码">
          <el-input v-model="processQuery.processItemId" placeholder="请输入产品物料编码"></el-input>
        </el-form-item>
        <el-form-item label="产品物料名称">
          <el-input v-model="processQuery.processItemName" placeholder="请输入产品物料名称"></el-input>
        </el-form-item>
        <el-form-item label="检测结果">
          <el-select v-model="processQuery.processMaterialOutcome" placeholder="请选择检测结果" style="width: 200px">
            <el-option label="全部" :value="0"></el-option>
            <el-option label="检验通过" :value="1"></el-option>
            <el-option label="检验不通过" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"  @click="loadProcessList">查询</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
<!--  工具栏-->
  <el-row style="margin-top: 20px">
    <el-col :span="24">
      <el-button type="primary" @click="addProcess">新增</el-button>
      <el-button type="success" >修改</el-button>
      <el-button type="danger" @click="deleteProcessBatch">删除</el-button>
    </el-col>
  </el-row>
<!--  内容栏-->
  <el-row style="margin-top: 15px">
    <el-col :span="24" >
      <el-table :data="processes" border style="width: 100%" @selection-change="selectProcess">
        <el-table-column type="selection" width="55" ></el-table-column>
        <el-table-column align="center" prop="processId" label="检验单编号" width="180"></el-table-column>
        <el-table-column align="center" prop="processType" label="检验类型" width="180">
          <template #default="scope">
            <el-tag v-if="scope.row.processType==1" type="success">首检</el-tag>
            <el-tag v-if="scope.row.processType==2" type="warning">末检</el-tag>
            <el-tag v-if="scope.row.processType==3" type="info">自检</el-tag>
            <el-tag v-if="scope.row.processType==4" type="danger">巡检</el-tag>
            <el-tag v-if="scope.row.processType==5" type="primary">点检</el-tag>
            <el-tag v-if="scope.row.processType==6" type="success">终检</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="processTicketsId" label="工单编号" width="180"></el-table-column>
        <el-table-column align="center" prop="processItemId" label="产品物料编码" width="180"></el-table-column>
        <el-table-column align="center" prop="processItemName" label="产品物料名称" width="180"></el-table-column>
        <el-table-column align="center" prop="processItemSpecification" label="规格型号" width="180"></el-table-column>
        <el-table-column align="center" prop="processItemUnit" label="单位" width="180"></el-table-column>
        <el-table-column align="center" prop="processMaterialCount" label="检测数量" width="180"></el-table-column>
        <el-table-column align="center" prop="processMaterialOutcome" label="检测结果" width="180">
          <template #default="scope">
            <el-tag v-if="scope.row.processMaterialOutcome==1" type="success">检验通过</el-tag>
            <el-tag v-if="scope.row.processMaterialOutcome==2" type="danger">检验不通过</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="processMaterialDate" label="检测日期" width="180"></el-table-column>
        <el-table-column align="center" prop="processMaterialPerson" label="检测人员" width="180">
          <template #default="scope">
            <el-tag v-if="scope.row.processMaterialPerson==1" type="success">管理员</el-tag>
            <el-tag v-if="scope.row.processMaterialPerson==2" type="info">非管理员</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="processDocumentStatus" label="单据状态" width="180">
          <template #default="scope">
            <el-tag v-if="scope.row.processDocumentStatus==1" type="success">草稿</el-tag>
            <el-tag v-if="scope.row.processDocumentStatus==2" type="info">已确认</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="100">
          <template #default="scope">
            <el-button type="text" @click="editProcess(scope.row.processId)">修改</el-button>
            <el-button type="text" @click="deleteProcess(scope.row.processId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
  <!--  分页栏-->
  <el-row style="margin-top: 15px">
    <el-col :span="24">
      <el-pagination @change="changePage" background layout="prev, pager, next" :total="total"/>
    </el-col>
  </el-row>
<!--  新增弹窗-->
  <el-dialog title="新增过程检验" v-model="addProcessDialogVisible" width="50%" >
    <el-form :model="newProcess" label-width="120px" :inline="true" style="margin-top: 20px">
      <el-form-item label="过程检验单编号">
        <el-input v-model="newProcess.processId" placeholder="请输入过程检验单编号"></el-input>
      </el-form-item>
      <el-form-item label="检验类型">
        <el-select v-model="newProcess.processType" placeholder="请选择检验类型" style="width: 200px">
          <el-option label="首检" :value="1"></el-option>
          <el-option label="末检" :value="2"></el-option>
          <el-option label="自检" :value="3"></el-option>
          <el-option label="巡检" :value="4"></el-option>
          <el-option label="点检" :value="5"></el-option>
          <el-option label="终检" :value="6"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="工单编号">
        <el-input v-model="newProcess.processTicketsId" placeholder="请输入工单编号"></el-input>
      </el-form-item>
      <el-form-item label="产品物料编码">
        <el-input v-model="newProcess.processItemId" placeholder="请输入产品物料编码"></el-input>
      </el-form-item>
      <el-form-item label="产品物料名称">
        <el-input v-model="newProcess.processItemName" placeholder="请输入产品物料名称"></el-input>
      </el-form-item>
      <el-form-item label="规格型号">
        <el-input v-model="newProcess.processItemSpecification" placeholder="请输入规格型号"></el-input>
      </el-form-item>
      <el-form-item label="单位">
        <el-input v-model="newProcess.processItemUnit" placeholder="请输入单位"></el-input>
      </el-form-item>
      <el-form-item label="检测数量">
        <el-input-number v-model="newProcess.processMaterialCount" style="width: 200px" :min ="1"></el-input-number>
      </el-form-item>
      <el-form-item label="检测结果">
        <el-select v-model="newProcess.processMaterialOutcome" placeholder="请选择检测结果" style="width: 200px">
          <el-option label="检验通过" :value="1"></el-option>
          <el-option label="检验不通过" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="检测日期">
        <el-date-picker v-model="newProcess.processMaterialDate" type="date" placeholder="选择日期" style="width: 200px"></el-date-picker>
      </el-form-item>
    </el-form>
    <el-form>
      <el-form-item label="备注">
        <el-input  type="textarea" placeholder="请输入备注"></el-input>
      </el-form-item>
      <el-form-item style="margin-top: 20px">
        <el-button type="primary" @click="addProcessConfirm">确定</el-button>
        <el-button @click="addProcessCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
<!--  编辑弹窗-->
  <el-dialog title="修改过程检验单" v-model="editProcessDialogVisible" width="80%" >
    <el-form :model="selectByIdProcess" label-width="120px" :inline="true" style="margin-top: 20px">
      <el-form-item label="过程检验单编号">
        <el-input v-model="selectByIdProcess.processId" placeholder="请输入过程检验单编号"></el-input>
      </el-form-item>
      <el-form-item label="检验类型">
        <el-select v-model="selectByIdProcess.processType" placeholder="请选择检验类型" style="width: 200px">
          <el-option label="首检" :value="1"></el-option>
          <el-option label="末检" :value="2"></el-option>
          <el-option label="自检" :value="3"></el-option>
          <el-option label="巡检" :value="4"></el-option>
          <el-option label="点检" :value="5"></el-option>
          <el-option label="终检" :value="6"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="工单编号">
        <el-input v-model="selectByIdProcess.processTicketsId" placeholder="请输入工单编号"></el-input>
      </el-form-item>
      <el-form-item label="产品物料编码">
        <el-input v-model="selectByIdProcess.processItemId" placeholder="请输入产品物料编码"></el-input>
      </el-form-item>
      <el-form-item label="产品物料名称">
        <el-input v-model="selectByIdProcess.processItemName" placeholder="请输入产品物料名称"></el-input>
      </el-form-item>
      <el-form-item label="规格型号">
        <el-input v-model="selectByIdProcess.processItemSpecification" placeholder="请输入规格型号"></el-input>
      </el-form-item>
      <el-form-item label="单位">
        <el-input v-model="selectByIdProcess.processItemUnit" placeholder="请输入单位"></el-input>
      </el-form-item>
      <el-form-item label="检测数量">
        <el-input-number v-model="selectByIdProcess.processMaterialCount" style="width: 200px" :min ="1"></el-input-number>
      </el-form-item>
      <el-form-item label="检测结果">
        <el-select v-model="selectByIdProcess.processMaterialOutcome" placeholder="请选择检测结果" style="width: 200px">
          <el-option label="检验通过" :value="1"></el-option>
          <el-option label="检验不通过" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="检测日期">
        <el-date-picker v-model="selectByIdProcess.processMaterialDate" type="date" placeholder="选择日期" style="width: 200px"></el-date-picker>
      </el-form-item>
    </el-form>
    <el-form>
      <el-text>--------------------------------------------------------------------------------------检测项---------------------------------------------------------------------------------------------</el-text>
    </el-form>
    <el-form>
      <!--  内容栏-->
      <el-row style="margin-top: 15px">
        <el-col :span="24">
          <el-table stripe border style="width: 100%" :data="processTestingProjects">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column align="center" prop="testingProjectName" label="检测项名称" width="150"></el-table-column>
            <el-table-column align="center" prop="testingProjectType" label="检测项类型" width="150">
              <template #default="scope">
                <el-tag type="success" v-if="scope.row.testingProjectType == 1">尺寸</el-tag>
                <el-tag type="warning" v-else-if="scope.row.testingProjectType == 2">外观</el-tag>
                <el-tag type="danger" v-else-if="scope.row.testingProjectType == 3">重量</el-tag>
                <el-tag type="info" v-else-if="scope.row.testingProjectType == 4">性能</el-tag>
                <el-tag type="primary" v-else-if="scope.row.testingProjectType == 5">成分</el-tag>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="testingProjectTool" label="检测工具" width="150"></el-table-column>
            <el-table-column align="center" prop="testingProjectMethod" label="检测方法" width="150"></el-table-column>
            <el-table-column align="center" prop="testingProjectStandard" label="标准值" width="150"></el-table-column>
            <el-table-column align="center" prop="testingProjectUnit" label="单位" width="150"></el-table-column>
            <el-table-column align="center" prop="testingProjectErrorMax" label="误差上限" width="150"></el-table-column>
            <el-table-column align="center" prop="testingProjectErrorMin" label="误差下限" width="150"></el-table-column>
            <el-table-column align="center" prop="testingProjectFatalFlaw" label="致命缺陷数量" width="150"></el-table-column>
            <el-table-column align="center" prop="testingProjectSevereFlaw" label="严重缺陷数量" width="150"></el-table-column>
            <el-table-column align="center" prop="testingProjectSlightFlaw" label="轻微缺陷数量" width="150"></el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <!--    分页栏-->
      <el-row style="margin-top: 15px">
        <el-col :span="24">
          <el-pagination @change="changePageProcessTestingProject" background layout="prev, pager, next" :total="totalTestingProject"/>
        </el-col>
      </el-row>
      <el-row style="margin-top: 15px">
        <el-form-item style="margin-top: 20px">
          <el-button type="primary" @click="editProcessConfirm">确定</el-button>
          <el-button @click="editProcessCancel">取消</el-button>
        </el-form-item>
      </el-row>
    </el-form>
  </el-dialog>
</template>
<script setup>
import {ref,onMounted} from 'vue';
import {useRouter,useRoute} from "vue-router";
import {ElMessage} from "element-plus";
import processRequest from "@/api/defece/process.js";
import testingProjectRequest from "@/api/defece/testingProject.js";
// 封装查询对象
let processQuery = ref({});
let processes = ref([]);
let curPage = ref(1);
let total = ref(0);
// 封装新增的过程检验对象
let newProcess = ref({});
// 新增弹窗的控制器
let addProcessDialogVisible = ref(false);
// 封装通过id查询到的过程检验单的信息
let selectByIdProcess = ref({});
// 编辑窗口的控制器
let editProcessDialogVisible = ref(false);
// 封装检测项查询对象
let processTestingProjectQuery = ref({});
let processTestingProjects = ref([]);
let curPageTestingProject = ref(1);
let totalTestingProject = ref(0);
// 封装通过id查询到的过程检验数据的id
let selectProcessId = ref([]);
// 获取被选中的数据信息的id
function selectProcess(queryTable){
  let listProcess = new Array();
  queryTable.forEach(item=>{
    listProcess.push(item.processId);
    selectProcessId.value = listProcess;
    console.log(selectProcessId.value)
  })
}
// 批量删除的点击事件
function deleteProcessBatch(){
  for (let i = 0; i < selectProcessId.value.length; i++){
    deleteProcess(selectProcessId.value[i])
  }
}
// 删除按钮的点击事件
function deleteProcess(processId){
  processRequest.loadDeleteProcess(processId,(res)=>{
    if (res.code == 200){
      ElMessage({
        message: "删除成功",
        type: "success"
      })
    }
    loadProcessList();
  })
}
// 加载检测项分页栏
function changePageProcessTestingProject(value){
  curPageTestingProject.value = value;
  loadTestingProjectProcess();
}
// 加载检测项列表
function loadTestingProjectProcess(){
  testingProjectRequest.loadTestingProject(processTestingProjectQuery.value,curPageTestingProject.value,10,res=>{
    totalTestingProject.value = res.data.total;
    processTestingProjects.value = res.data.list;
    console.log(processTestingProjects.value)
  })
}
// 编辑按钮的点击事件
function editProcess(processId){
  editProcessDialogVisible.value = true;
  processRequest.loadSelectByIdProcess(processId,(res)=>{
    selectByIdProcess.value = res.data;
  })
  loadTestingProjectProcess();
}
// 编辑弹窗确认按钮的点击事件
function editProcessConfirm(){
  processRequest.loadUpdateProcess(selectByIdProcess.value,(res)=>{
    if (res.code == 200){
      ElMessage({
        message: "修改成功",
        type: "success"
      })
    }
    editProcessDialogVisible.value = false;
    loadProcessList();
  })
}
//   编辑弹窗取消按钮的点击事件
function editProcessCancel(){
  editProcessDialogVisible.value = false;
  newProcess.value = {};
}
// 新增按钮的点击事件
function addProcess(){
  addProcessDialogVisible.value = true;
}
// 新增弹窗的确定按钮的点击事件
function addProcessConfirm(){
  processRequest.loadAddProcess(newProcess.value,(res)=>{
    if (res.code == 200){
      ElMessage({
        message: "添加成功",
        type: "success"
      })
    }
    addProcessDialogVisible.value = false;
    loadProcessList();
  })
}
// 新增弹窗取消按钮的点击事件
function addProcessCancel(){
  addProcessDialogVisible.value = false;
  newProcess.value = {};
}
// 加载项目列表
function loadProcessList(){
  processRequest.loadProcess(processQuery.value,curPage.value,10,(res)=>{
    total.value = res.data.total;
    processes.value = res.data.list;
    console.log(processes.value)
  })
}
// 分页栏
function changePage(value){
  curPage.value = value;
  loadProcessList();
}
onMounted(()=>{
  loadProcessList();
})
</script>
<style scoped>

</style>